<template>
		<view class="head-box-packbox relative">
			<!-- <image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/user/basic-info-head-box-bg.png`" class="bg" /> -->
			<view class="head flex flex-align-items-center" style="border-bottom: 2rpx solid #fff;" @click.stop="changeAvatar(1)">
				<image 
					v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
					:src="`${commonConfigs.domainFrontFileLink}/files/images/user/icon-system-avatar.png`"
					class="icon-avatar" />
				<view class="text relative" >系统头像</view>
			</view>
			<view class="head flex flex-align-items-center" @click.stop="changeAvatar(2)">
				<image 
					v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
					:src="`${commonConfigs.domainFrontFileLink}/files/images/user/icon-custom-avatar.png`"
					class="icon-avatar-sec" />
				<view class="text relative" >自定义头像</view>
			</view>
		</view>
		
</template>

<script>
	export default {
		name: 'comHeadSculpture',
		data(){
			return {
				
			}
		},
		computed: {
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
		},
		methods:{
			// 系统头像 自定义头像
			changeAvatar(id){
				this.$emit('changeAvatar',id)
			},
			
		}
	}
</script>

<style lang="scss" scoped>
		
		.head-box-packbox{
			width: 199rpx;
			height: 124rpx;
			color: #FFFFFF;
			font-size: 24rpx;
			padding-top: 16rpx;
			position: relative;
			z-index: 100;
			// pointer-events: none;
			background: #000;
			border-radius: 16rpx;
			.head {
				margin-bottom: 16rpx;
				padding-bottom: 16rpx;
			}
			.text {
				color: #FFF;
			}
			.icon-avatar{
				width: 28rpx;
				height: 30rpx;
				margin: 0 14rpx 0 26rpx;
			}
			.icon-avatar-sec {
				width: 24rpx;
				height: 24rpx;
				margin: 0 14rpx 0 26rpx;
			}
		}
</style>